<!--
 * @Author: byron
 * @Date: 2021-09-03 17:14:59
 * @LastEditTime: 2021-09-03 17:45:15
-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 准备容器 -->
    <div id="test"></div>

    <!-- 引入必要的js库 -->
    <script type="text/javascript" src="../../lib/react.development.js"></script>
    <script type="text/javascript" src="../../lib/react-dom.development.js"></script>
    <!-- 引入babel库进行语法转化 -->
    <script type="text/javascript" src="../../lib/babel.min.js"></script>

    <script type="text/babel">
        class Login extends React.Component{
            /* 

            使用index作为key
                数据： 
                    {id:1,name:'王灿',age:"18"},
                    {id:2,name:'李登惠子',age:"18"},

                初始化虚拟DOM：
                    <li key=0> 王灿---18 </li>
                    <li key=1> 李登惠子---18 </li>

                更新后的数据：
                    {id:3,name:'刘杰',age:"20"},
                    {id:1,name:'王灿',age:"18"},
                    {id:2,name:'李登惠子',age:"18"},
                更新后的虚拟DOM：
                    <li key=0> 刘杰---20 </li>
                    <li key=1> 王灿---18 </li>
                    <li key=2> 李登惠子---18 </li>

                此时新旧DOM进行diff对比，三条全都不一样，三条都得重新渲染成为真实DOM
                导致本可以复用的DOM无法进行复用，导致效率下降

            使用id作为key
                数据： 
                    {id:1,name:'王灿',age:"18"},
                    {id:2,name:'李登惠子',age:"18"},

                初始化虚拟DOM：
                    <li key=1> 王灿---18 </li>
                    <li key=2> 李登惠子---18 </li>

                更新后的数据：
                    {id:3,name:'刘杰',age:"20"},
                    {id:1,name:'王灿',age:"18"},
                    {id:2,name:'李登惠子',age:"18"},

                更新后的虚拟DOM：
                    <li key=3> 刘杰---20 </li>
                    <li key=1> 王灿---18 </li>
                    <li key=2> 李登惠子---18 </li>

                此时新旧DOM进行diff对比，两条都可以复用，效率高
            */

            state = {
                persons:[
                    {id:1,name:'王灿',age:"18"},
                    {id:2,name:'李登惠子',age:"18"},
                ]
            }

            unshow = () => {
                ReactDOM.unmountComponentAtNode(document.querySelector('#test'))
            }

            add = () => {
                const {persons} = this.state
                const p = {id:persons.length+1,name:'刘杰',age:'20'}
                this.setState({
                    persons:[p,...persons]
                })
            }

            render(){
                return (
                    <div>
                        <h2>展示学生信息</h2>
                        <button onClick = {this.add}>刘杰来了</button>
                        <ul>
                        {
                            this.state.persons.map((personObj,index) => {
                                return <li key={index}>{personObj.name}----{personObj.age}</li>
                            })
                        }
                        </ul>
                    </div>
                    
                )
            }
        }
        ReactDOM.render(<Login />,document.querySelector('#test'))
    </script>
</body>

</html>